<template>
	<view>
		<view style="height: 20rpx"></view>
		<view @tap="toDetail(item)" class="item flex-row" v-for="item in list" :key="item.groupId">
			<xbc-avatar :src="item.avatar" size="40px" group />
			<view class="title">{{ item.name }}</view>
		</view>
		<view style="height: 20rpx"></view>
		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script>
import XBCIM from 'xbcim'
export default{
	data(){
		return {
			list: [],
			status: 'more',
			isComplete: false,
			state: {
				page: 1
			}
		}
	},
	onLoad() {
		this.getList()
	},
	onReachBottom(){
		if(this.isComplete) return
		this.state.page++
		getList()
	},
	onNavigationBarButtonTap(){
		uni.showToast({
			icon: 'none',
			title: '演示版不支持创建群聊'
		})
	},
	methods: {
		toDetail(group) {
			uni.setStorageSync('currentConversation', {
				conversationId: group.groupId,
				groupId: group.groupId,
				type: 'group',
				source: 'list'
			})
			uni.navigateTo({
				url: '/pages/contact/group/detail'
			})
		},
		async getList() {
			const res = await XBCIM.getGroupList(this.state)
			
			if(this.state.page > 1){
				this.list.push(...res?.list)
			}else{
				this.list = res?.list || []
			}
			
			this.isComplete = res?.isComplete
			this.status = this.isComplete ? 'no-more' : 'more'
		}
	}
}
</script>

<style lang="scss" scoped>
.item {
	padding: 20rpx 30rpx;

	.title {
		flex: 1;
		color: #333;
		font-size: 30rpx;
		margin-left: 30rpx;
		@include line-height(80rpx);
	}
}
</style>